<template>
  <el-card class="mt15 mb15">
    <!-- 第一行——操作按钮 -->
    <div class="filter-container">
      <el-button type="primary" icon="el-icon-document-add" @click="editShow2('新增',topBlockId,null)">新增</el-button>
    </div>
    <!-- / 第一行——操作按钮 -->
    <el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >

      <el-table-column
        prop="name"
        :label="topBlockId=='b-index-tree-job'?'行业/职位':'专业分类/专业'"
      />
      <el-table-column align="center" prop="createTime" label="加入时间" width="200px" />
      <el-table-column align="center" prop="sequence" label="排序" width="200px">
        <template slot-scope="{ row }">
          <el-input-number v-model="row.sequence" :min="1" :max="10000" style="width: 140px;" label="排序" @change="handleChange(row)" />
        </template>
      </el-table-column>

      <!-- 操作 -->
      <el-table-column label="操作" align="center" width="130px">
        <template slot-scope="{row,$index}">
          <el-button type="text" @click="editShow2('编辑',topBlockId,row)">编辑</el-button>
          <el-button type="text" @click="delItem(row,$index)">删除</el-button>

          <!-- <el-button type="text" @click="topItem(row)">置顶</el-button> -->
        </template>
      </el-table-column>
      <!-- / 操作 -->

      <edit-block ref="editBlock" @refresh="refresh" />
    </el-table>

    <!-- 分页-->
    <pagination
      v-show="total>0"
      :total="total"
      next-text="下一页"
      layout="prev, pager, next, jumper"
      :page.sync="listQuery.pageNo"
      :limit.sync="listQuery.pageSize"
      @current-change="currentChange"
      @pagination="getList"
    />
    <!-- / 分页 -->

    <edit-block ref="editBlock" @refresh="refresh" />
  </el-card>
</template>

<script>
// import { fetchList } from "@/api/article";

import Pagination from '@/components/Pagination' // secondary package based on el-pagination
import editBlock from './components/edit-block'
import { block_save, block_delete, block_list_v2 } from '@/api/block'
export default {
  components: { Pagination, editBlock },

  data() {
    return {

      tableData: [],

      total: 0,
      label_name: '行业/职位',

      // blockId:"",
      topBlockId: '',
      list: [],
      // 新增弹出框
      dialogVisible: false, // 弹出框的显示与隐藏
      listLoading: true,
      listQuery: {
        pageNo: 1,
        pageSize: 10,
        parentId: this.blockId
        // type:"default",
        //  sort: false
      }

    }
  },
  created() {
    // /block/index_notice/notice/end
    // 获得栏目id（PS：这是一个比较奇葩的解决方案（通过路由地址获得栏目id），但高手也暂无解决办法）
    const topBlockId = window.location.href.substring(window.location.href.indexOf('/block/tree/') + '/block/tree/'.length, window.location.href.indexOf('/end'))
    this.topBlockId = topBlockId
    console.log(`============>the url_params is:`, topBlockId)

    this.listQuery.parentId = this.topBlockId
    // this.initBlockId();
    this.getList()
  },
  methods: {

    // table表格事件
    indexMethod(index) {
      return index * 2
    },

    // 打开
    editShow2(title, topBlockId, rowData) {
      // console.log("topBlockId",topBlockId ,"rowData",rowData);
      // if(''== this.blockId){
      //
      // }
      this.$refs.editBlock.show(title, topBlockId, rowData)
    },
    // 列表
    getList() {
      this.listLoading = true

      block_list_v2(this.listQuery).then(response => {
        const tableData = response.result.records
        const tableDatas = []
        for (let i = 0; i < tableData.length; i++) {
          const element = tableData[i]
          console.log(element.name)
          block_list_v2({ 'parentId': element.id, 'pageSize': 100000000 }).then(response => {
            const list = response.result.records
            if (list == null || list.size == 0) {

            } else {
              element.children = list
            }
            tableDatas.push(element)
          })// end of block_list_v2
        }// end of for

        this.tableData = tableDatas
        this.total = response.result.total
        this.listLoading = false
      })
    },
    refresh() {
      this.getList()
    },

    handleChange(row) { // 排序
      block_save(row).then(response => {
        this.$message({
          type: 'success',
          message: '更新成功！'
        })
        // this.drawerShow = false

        this.getList()
      })
    },

    // 删除
    delItem(e, index) {
      // console.log("children"+e.children)
      // console.log("e.children.size"+e.children.length)
      if (e.children && e.children.length > 0) {
        this.$message({
          type: 'info',
          message: '请先删除子节点'
        })
        return
      }
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //   return;
        block_delete({ id: e.id }).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
          this.refresh()
        })
        // this.list.splice(index, 1)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    currentChange(e) {
      console.log(e)
    },
    // 弹出框---分页点击事件
    handleSizeChange() {},
    handleCurrentChange() {},

    // ---------------------------

    // 外部分页 -- 搜索
    handleFilter() {}
  }
}
</script>
<style lang="scss" scoped>

</style>
